import http from '../../http/http';
import { useEffect, useState } from 'react';
import './goodsDetail.less'
import { View, Swiper, SwiperItem, Image, ScrollView } from '@tarojs/components'
import Taro,{useDidShow} from '@tarojs/taro';
import { AtModal, AtModalHeader, AtModalContent, AtInputNumber, AtModalAction, AtAvatar, AtButton,AtToast,AtIcon } from "taro-ui"
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/modal.scss";
import "taro-ui/dist/style/components/input-number.scss";
import "taro-ui/dist/style/components/avatar.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/toast.scss";
import "taro-ui/dist/style/components/icon.scss";

function GoodsDetail() {
  //顶部轮播图和底部图
  const [img, setImg] = useState([
    {
      id: 1,
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp15.qhimg.com%2Fbdr%2F740__%2Fd%2F_open360%2Fdongman1031%2F11.jpg&refer=http%3A%2F%2Fp15.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631346022&t=5384595214a601f7d1b0e74030f5109c'
    },
    {
      id: 2,
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn12%2F155%2Fw640h315%2F20180509%2F2e49-haichqy8258054.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631346104&t=8c178aaa684608ebe97b36c125c76e0b'
    }
  ])
  //home跳转
  const home = () => {
    Taro.switchTab({
      url: '/pages/home/home'
    })
  }
  //购物车跳转
  const buyCar=()=>{
    Taro.switchTab({
      url: '/pages/cart/cart'
    })
  }
  //商品详情
  const [detail,setDetail]=useState({})
  //购物车数量
  const [carUnm,setCarNum]=useState()
  useDidShow(()=>{
    http({
      url:'/panchen/getAllCart',
      method: 'get',
    }).then(res=>{
      setCarNum(res.data[0].unm)
    })
    http({
      url:'/panchen/getGoodDetail',
      method:'get',
      data:{
        id:8
      }
    }).then(res=>{
      // console.log(res);
      setDetail(res.data[0])
    })
  })
  const car=()=>{
    setState(true)
  }
  const buy=()=>{
    setState(true)
  }
  //选中规格
  const [parameterid, setParameterId] = useState()
  //所选规格
  const [parameter, setParameter] = useState()
  //选中颜色
  const [colid, setColId] = useState()
  //所选颜色
  const [color1, setColor] = useState()
  //规格
  const [list, setList] = useState([
    { id: 1, name: 'EU36' },
    { id: 2, name: 'EU37' },
    { id: 3, name: 'EU38' },
    { id: 4, name: 'EU39' },
    { id: 5, name: 'EU40' },
    { id: 6, name: 'EU41' }
  ])
  //颜色
  const [col, setCol] = useState([
    { id: 1, col: '红色' },
    { id: 2, col: '黑色' },
    { id: 3, col: '黄色' },
    { id: 4, col: '白色' },
    { id: 5, col: '蓝色' },
    { id: 6, col: '粉色' }
  ])
  //选择规格
  const name = (v) => {
    setParameterId(v.id)
    setParameter(v.name)
    console.log(v);
  }
  //选择颜色
  const color = (v) => {
    setColId(v.id)
    setColor(v.col)
    console.log(v);

  }
  //弹框状态
  const [state, setState] = useState(false)
  const details = () => {
    setState(true)
  }
  const close1 = () => {
    setState(false)
  }
  const yes = () => {
    console.log(value, parameter, color1);
    setState(false)
    setVlaue(0)
  }
  //选择数量
  const [value, setVlaue] = useState(0)
  const handleChange = (value) => {
    setVlaue(value)
  }
  //分享弹框
  const [share, setShare] = useState(false)
  const shareBtn = () => {
    setShare(true)
    setIsOpen(false)
  }
  const close2 = () => {
    setShare(false)
  }
  //海报弹框
  const[isOpen,setIsOpen]=useState(false)
  //生成海报
  const news = () => {
    console.log(1);
    Taro.getImageInfo({
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp15.qhimg.com%2Fbdr%2F740__%2Fd%2F_open360%2Fdongman1031%2F11.jpg&refer=http%3A%2F%2Fp15.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631346022&t=5384595214a601f7d1b0e74030f5109c',
      success: (res) => {
        Taro.saveImageToPhotosAlbum({
          filePath: res.path,
          success: () => {
            console.log('save success');
            setIsOpen(true)
            setShare(false)
            // await uni.showToast({
            //   title: '保存成功'
            // })
            // await this.$refs.popup.close()

          }
        });
      }
    });
  }
  return (
    <View className='box1'>
      {/* 分享成功弹框 */}
      <AtToast isOpened={isOpen} text="保存成功" icon="check" duration={1000}></AtToast>
      {/* 轮播图 */}
      <View>
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          style='height:240px'
        >
          {img.map((v, i) => (
            <SwiperItem key={v.id}>
              <View>
                <Image
                  style='width: 375px'
                  src={v.src}
                /></View>
            </SwiperItem>
          ))}
        </Swiper>
        {/* 收藏按钮 */}
        <View></View>
      </View>
      {/* 信息 */}
      <View className='xianshi'>
        {/* 收藏 */}
        <View className='biaoti'>{detail.name}</View>
        <View className='zhongzi jiacu py-2'>男装 上衣</View>
        <View className='d-f x-s-b y-b py-4'>
          <View className='d-f y-b'>
            <View className='d-f y-b'>
              <View className='zhongzi'>￥</View>
              <View className='jiage jiacu'>{detail.sell_price}.00</View>
            </View>
            <View className='mx-2 hui zhongzi'>预估收益: {detail.sell_price - detail.supply_price}.00</View>
          </View>
          <View className='zhongzi'>销量:{detail.sall_num}</View>
        </View>
        <View className='zhongzi jiacu py-3' onClick={details}>选择规格</View>
        <View>
          <ScrollView
            className='scrollview d-f sView my-2'
            scrollX={true}
            enableFlex={true}
          >
            {list.map((v, i) => (
              <View key={v.id} className={[v.id == parameterid ? 'sekuang' : 'xiaokuang',]} onClick={() => name(v)}>{v.name}</View>
            ))}
          </ScrollView>
        </View>
        <View className='zhongzi jiacu py-3' onClick={details}>选择颜色</View>
        <View>
          <ScrollView
            className='scrollview d-f sView my-2'
            scrollX={true}
            enableFlex={true}
          >
            {col.map((v, i) => (
              <View key={v.id} className={[v.id == colid ? 'sekuang' : 'xiaokuang',]} onClick={() => color(v)}>{v.col}</View>
            ))}
          </ScrollView>
        </View>
        <View className='zhongzi jiacu py-3'>商品详情</View>
      </View>
      <View>
        {img.map((v, i) => (
          <Image key={v.id} style='width: 375px' src={v.src} />
        ))}
      </View>
      {/* 底部占位 */}
      <View className='Dzhanwei'></View>
      {/* 底部 */}
      <View className='di d-f x-s-b y-c'>
        <View className='icon' onClick={home}>
          <View className='at-icon at-icon-shopping-bag-2'></View>
          <View>店铺</View>
        </View>
        <View className='icon' onClick={shareBtn}>
          <View className='at-icon at-icon-share'></View>
          <View>分享</View>
        </View>
        <View className='icon' onClick={buyCar}>
          <View className='at-icon at-icon-shopping-cart'></View>
          <View>购物车</View>
          <View className='shuzi'>{carUnm}</View>
        </View>
        <View className='d-f zhongzi'>
          <View className='car' onClick={car}>加入购物车</View>
          <View className='buy' onClick={buy}>立即购买</View>
        </View>
      </View>
      {/* 规格弹出框 */}
      <AtModal isOpened={state} onClose={close1}>
        <AtModalHeader>编辑订单</AtModalHeader>
        <AtModalContent>
          {/* 详情 */}
          <View className='d-f x-s-b'>
            <View>
              <View>男鞋夏季2019新款网红涂鸦潮鞋高邦帆布板鞋韩版潮</View>
              <View className='hui biaoti'>免邮费 | 库存： 84</View>
            </View>
            <View>
              <Image style='width:80px;height:80px;border-radius:10px;' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp15.qhimg.com%2Fbdr%2F740__%2Fd%2F_open360%2Fdongman1031%2F11.jpg&refer=http%3A%2F%2Fp15.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631346022&t=5384595214a601f7d1b0e74030f5109c' />
            </View>
          </View>
          {/* 规格 */}
          <View className='py-3 xianX'>
            <View className=''>选择规格</View>
            <View className='d-f f-w x-s-b'>
              {list.map((v, i) => (
                <View key={v.id} className={[v.id == parameterid ? 'sekuang my-2' : 'xiaokuang my-2']} onClick={() => name(v)}>{v.name}</View>
              ))}
              {/* 占位 */}
              <View className='zhanwei'></View>
              <View className='zhanwei'></View>
              <View className='zhanwei'></View>
            </View>
          </View>
          {/* 颜色 */}
          <View className='py-3 xianS'>
            <View className=''>选择颜色</View>
            <View className='d-f f-w x-s-b'>
              {col.map((v, i) => (
                <View key={v.id} className={[v.id == colid ? 'sekuang my-2' : 'xiaokuang my-2',]} onClick={() => color(v)}>{v.col}</View>
              ))}
              {/* 占位 */}
              <View className='zhanwei'></View>
              <View className='zhanwei'></View>
              <View className='zhanwei'></View>
            </View>
          </View>
          {/* 数量 */}
          <View className='d-f y-c x-s-b my-2'>
            <View>
              <AtInputNumber
                min={0}
                step={1}
                value={value}
                onChange={handleChange.bind(this)}
              />
            </View>
            <View className='yes' onClick={yes}>确定</View>
          </View>
        </AtModalContent>
      </AtModal>
      {/* 分享弹出框 */}
      <AtModal isOpened={share} onClose={close2}>
        <AtModalHeader className='d-f'>
          <View>
            <AtAvatar size='small' circle={true} image='https://jdc.jd.com/img/200'></AtAvatar>
          </View>
          <View className='t-l px-2'>
            <View className='font-w'>TC_ZY</View>
            <View className='font-sdl'>分享了一个好物给你</View>
          </View>
        </AtModalHeader>
        <AtModalContent>
          <View className='d-f x-s-a f-w'>
            <Image style='width:200px;height:200px;border-radius:10px;' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp15.qhimg.com%2Fbdr%2F740__%2Fd%2F_open360%2Fdongman1031%2F11.jpg&refer=http%3A%2F%2Fp15.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631346022&t=5384595214a601f7d1b0e74030f5109c' />
            <View>
              <View className='d-f y-b py-1'>
                <View className='font-sdl'>￥</View>
                <View className='font-w cuzi'>128.00</View>
              </View>
              <View className='goodsmiaoshu'>男鞋夏季2019新款网红涂鸦潮鞋高邦帆布板鞋韩版潮流个性高帮布鞋</View>
            </View>
          </View>
        </AtModalContent>
        <AtModalAction> <AtButton className='operat' openType='share'>发送朋友</AtButton> <AtButton className='operat' onClick={news}>生成海报</AtButton> </AtModalAction>
      </AtModal>
    </View>
  )

}

export default GoodsDetail;
